<template>
  <div class="financing-application-form">
    <!-- 表头区域 -->
    <div class="form-header">
      <h2>融资申请表</h2>
    </div>
    <!-- 融资申请表单区域（适配后端FinanceApplication实体） -->
    <el-form
        :model="financingForm"
        label-width="120px"
        :rules="formRules"
        ref="financingFormRef"
        style="max-width: 800px"
        status-icon
    >
      <!-- 1. 用户ID（自动获取当前登录用户，不可编辑） -->
      <el-form-item label="当前用户ID" prop="userId">
        <el-input
            v-model="financingForm.userId"
            style="width: 200px"
            disabled
            placeholder="获取用户信息中..."
        />
      </el-form-item>

      <!-- 2. 店铺ID（可选，后端关联t_shop） -->
      <el-form-item label="店铺ID（可选）" prop="shopId">
        <el-input-number
            v-model="financingForm.shopId"
            style="width: 200px"
            :min="1"
            placeholder="无店铺可留空"
            :disabled="isSubmitting"
        />
      </el-form-item>

      <!-- 3. 商品ID（可选，后端关联t_goods） -->
      <el-form-item label="商品ID（可选）" prop="goodsId">
        <el-input-number
            v-model="financingForm.goodsId"
            style="width: 200px"
            :min="1"
            placeholder="无关联商品可留空"
            :disabled="isSubmitting"
        />
      </el-form-item>

      <!-- 4. 申请金额（后端amount，精确到分，单位：元） -->
      <el-form-item label="申请金额（元）" prop="amount">
        <el-input-number
            v-model="financingForm.amount"
            style="width: 200px"
            type="number"
            :precision="2"
            placeholder="请输入金额（精确到分）"
            :disabled="isSubmitting"
        />
      </el-form-item>

      <!-- 5. 申请用途（后端purpose，必填） -->
      <el-form-item label="申请用途" prop="purpose">
        <el-input
            v-model="financingForm.purpose"
            style="width: 300px"
            placeholder="请说明融资用途（如：进货、扩建）"
            :disabled="isSubmitting"
        />
      </el-form-item>

      <!-- 6. 贷款期限（后端term，单位：月） -->
      <el-form-item label="贷款期限（月）" prop="term">
        <el-input-number
            v-model="financingForm.term"
            style="width: 150px"
            type="number"
            placeholder="请输入期限"
            :disabled="isSubmitting"
        />
      </el-form-item>

      <!-- 7. 利率（后端interestRate，单位：%，如5.50表示5.5%） -->
      <el-form-item label="年利率（%）" prop="interestRate">
        <el-input-number
            v-model="financingForm.interestRate"
            style="width: 150px"
            type="number"
            :precision="2"
            placeholder="如5.50表示5.5%"
            :disabled="isSubmitting"
        />
      </el-form-item>

      <!-- 提交按钮 -->
      <el-form-item style="margin-left: 120px">
        <el-button
            type="primary"
            @click="submitApplication"
            :loading="isSubmitting"
            :disabled="!financingForm.userId"
        >
          提交申请
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import router from '@/router/index.js'
// 1. 导入Pinia用户状态（自动获取当前登录用户ID）
import { useUserStore } from '@/stores/user'
// 2. 导入后端接口（对应/apis/finance/apply）
import { submitFinanceApplication } from '@/apis/financeApplicationApi'

// 初始化Pinia用户Store
const userStore = useUserStore()
// 表单实例引用
const financingFormRef = ref<FormInstance>()
// 提交加载状态（防止重复提交）
const isSubmitting = ref(false)

// 3. 表单数据（完全对齐后端FinanceApplication实体）
const financingForm = reactive({
  userId: '',         // 后端必填：关联t_user.uid（自动获取）
  shopId: null,       // 后端可选：关联t_shop.shopId
  goodsId: null,      // 后端可选：关联t_goods.gid
  amount: null,       // 后端必填：申请金额（BigDecimal）
  purpose: '',        // 后端必填：申请用途
  term: null,         // 后端必填：期限（月）
  interestRate: null  // 后端必填：利率（BigDecimal）
})

// 4. 表单校验规则（与后端实体校验呼应）
const formRules = {
  userId: [
    { required: true, message: '未获取到用户信息，请先登录', trigger: 'blur' }
  ],
  amount: [
    { required: true, message: '请输入申请金额', trigger: 'blur' },
    { type: 'number', message: '金额必须为数值', trigger: 'blur' }
  ],
  purpose: [
    { required: true, message: '请输入申请用途', trigger: 'blur' },
    { min: 2, max: 100, message: '用途长度应在2-100字符之间', trigger: 'blur' }
  ],
  term: [
    { required: true, message: '请输入贷款期限', trigger: 'blur' },
    { type: 'number', message: '期限必须为整数', trigger: 'blur' }
  ],
  interestRate: [
    { required: true, message: '请输入年利率', trigger: 'blur' },
    { type: 'number', message: '利率必须为数值', trigger: 'blur' }
  ]
}

// 5. 页面加载时自动获取当前登录用户ID
onMounted(() => {
  if (userStore.isLogin && userStore.userInfo.uid) {
    // 填充用户ID（假设Pinia中用户ID字段为uid，根据实际调整）
    financingForm.userId = userStore.userInfo.uid
  } else {
    ElMessage.warning('请先登录后提交融资申请')
    // 跳转到登录页（延迟1秒跳转，让用户看到提示）
    setTimeout(() => router.push('/login'), 1000)
  }
})

// 6. 提交申请（对接后端/apis/finance/apply接口）
const submitApplication = async () => {
  // 第一步：前端表单校验
  const isValid = await financingFormRef.value?.validate().catch(err => {
    ElMessage.error('表单填写有误，请检查后重试')
    console.warn('表单校验失败：', err)
    return false
  })
  if (!isValid) return

  try {
    // 第二步：调用后端接口提交
    isSubmitting.value = true
    const res = await submitFinanceApplication({
      // 只传递后端需要的字段
      userId: financingForm.userId,
      shopId: financingForm.shopId,
      goodsId: financingForm.goodsId,
      amount: financingForm.amount,
      purpose: financingForm.purpose,
      term: financingForm.term,
      interestRate: financingForm.interestRate
    })

    // 第三步：处理接口响应
    if (res?.success) {
      ElMessage.success(`提交成功！申请ID：${res.data.financeId}`)
      // 重置表单（保留用户ID，方便再次提交）
      financingFormRef.value?.resetFields()
      financingForm.userId = userStore.userInfo.uid
    } else {
      ElMessage.error(`提交失败：${res?.message || '未知错误'}`)
    }
  } catch (error) {
    // 第四步：捕获网络异常
    console.error('融资申请提交异常：', error)
    ElMessage.error('网络异常，请检查连接后重试')
  } finally {
    // 第五步：关闭加载状态
    isSubmitting.value = false
  }
}
</script>

<style scoped lang="less">
.financing-application-form {
  width: 100%;
  height: auto;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.form-header {
  text-align: center;
  margin-bottom: 30px;
  h2 {
    color: #1f2937;
    font-size: 20px;
    font-weight: 600;
  }
}

.el-form-item {
  margin-bottom: 25px;
}

// 禁用状态输入框样式优化
:deep(.el-input.is-disabled .el-input__inner) {
  background-color: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
}
</style>
